let leftArrow = document.querySelector('.leftArrow');
let rightArrow = document.querySelector('.rightArrow');
let ul = document.querySelector('ul');
let ol = document.querySelector('ol');
let box = document.querySelector('.box');
let index = 1;
let lastIndex = 0;
let timer = null;
let isRun = false;
let optionList = document.querySelectorAll('option');
function aj() {
  _ajax(
    'GET',
    'http://jianshe.bluej.cn/api/index/get_carousel?position_id=' + 1,
    rendTable
  );
  let ajax_img = 'http://jianshe.bluej.cn';
  function rendTable(imgInfo) {
    for (let i = 0; i < imgInfo.data.length; i++) {
      ul.innerHTML += `<li><a href=""><img src=${
        ajax_img + imgInfo.data[i].ch_img_url
      } alt=""></a></li>`;
      ol.innerHTML += `<li></li> `;
    }
    init();
  }
}
function init() {
  ul.style.transition = 'none';
  ul.insertBefore(ul.lastElementChild.cloneNode(true), ul.firstElementChild);
  ul.style.transform = `translateX(-100%)`;
  getComputedStyle(ul).transition;
  ul.appendChild(ul.firstElementChild.nextElementSibling.cloneNode(true));
  ul.style.transition = '';
  ol.firstElementChild.setAttribute('class', 'active');
  let pointList = document.querySelectorAll('.pointList li');
  sel();
  function sel() {
    for (let i = 0; i < optionList.length; i++) {
      optionList[i].addEventListener('click', () => {});
    }
  }

  leftArrow.addEventListener('click', () => {
    if (++index === ul.childElementCount - 1) {
      leftRun();
    } else {
      run();
      pointActive();
    }
  });

  rightArrow.addEventListener('click', () => {
    if (--index === 0) {
      rightRun();
    } else {
      run();
      pointActive();
    }
  });

  function leftRun() {
    ul.style.transform = `translateX(-${index}00%)`;
    index = 1;
    pointActive();

    ul.addEventListener(
      'transitionend',
      () => {
        ul.style.transition = 'none';
        index = 1;
        run();

        getComputedStyle(ul).transition;
        ul.style.transition = '';
      },
      { once: true }
    );
  }

  function rightRun() {
    run();

    index = ul.childElementCount - 2;
    pointActive();
    ul.addEventListener(
      'transitionend',
      () => {
        ul.style.transition = 'none';
        run();

        getComputedStyle(ul).transition;
        ul.style.transition = '';
      },
      { once: true }
    );
  }

  function run() {
    ul.style.transform = `translateX(-${index}00%)`;
  }
  function pointActive() {
    pointList[lastIndex].classList.remove('active');
    pointList[index - 1].classList.add('active');
    lastIndex = index - 1;
  }
}
